<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JPRQ - The Tunneling Service</title>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism-tomorrow.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.26.0/prism.min.js"></script>
    <style>
        *,
        *:before,
        *:after {
            box-sizing: border-box;
        }

        pre[class*="language-"] {
            position: relative;
            overflow: auto;

            /* make space  */
            margin: 5px 0;
            padding: 1.75rem 0 1.75rem 1rem;
            border-radius: 10px;
        }

        pre[class*="language-"] button {
            position: absolute;
            top: 5px;
            right: 5px;

            font-size: 0.9rem;
            padding: 0.15rem;
            background-color: #828282;

            border: ridge 1px #7b7b7c;
            border-radius: 5px;
            text-shadow: #c4c4c4 0 0 2px;
        }

        pre[class*="language-"] button:hover {
            cursor: pointer;
            background-color: #bcbabb;
        }

        main {
            display: grid;
            max-width: 600px;
            margin: 20px auto;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        }

        h1 {
            font-size: 1.3rem;
        }

        h3 {
            margin-bottom: 0;
        }

        li {
            margin-top: 12px;
        }
    </style>
</head>
<body>

<main>

    <div style="text-align: center;">
        <img height="140"
             src="https://user-images.githubusercontent.com/35038240/221522083-1011e567-e2b7-424c-a018-15e965cf8df9.png#gh-light-mode-only">
        <h1>jprq - join public router, quickly.</h1>
        <!-- Place this tag where you want the button to render. -->
        <a class="github-button" href="https://github.com/azimjohn/jprq" data-size="large" data-show-count="true"
           aria-label="Star azimjohn/jprq on GitHub">Star</a>

        <a href="https://www.buymeacoffee.com/azimjon"><img
                src="https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png" height="30px"></a>
    </div>

    <h3>What's JPRQ?</h3>
    <ul>
        <li>JPRQ is a free and open tool for exposing local servers to public network (the internet)</li>
        <li>It can expose TCP protocols, such as HTTP, SSH, etc. Any server!</li>
    </ul>

    <h3>How to install/update</h3>
    <pre>$ <code class="language-sh">curl -fsSL https://jprq.io/install.sh | sudo bash</code></pre>

    <h3>Authenticate</h3>
    <p>First obtain auth token from <a href="https://jprq.io/auth" target="_blank">jprq.io/auth</a>, then</p>
    <pre>$ <code class="language-sh">jprq auth &lt;your-auth-token&gt;</code></pre>

    <h3>Start http tunnel</h3>
    <p>Replace 3000 with the port you want to expose</p>
    <pre>$ <code class="language-sh">jprq http 3000</code></pre>

    <h3>Start tcp tunnel</h3>
    <p>For exposing any TCP servers, such as SSH</p>
    <pre>$ <code class="language-sh">jprq tcp 22</code></pre>

    <h3>Start http tunnel with custom subdomain</h3>
    <p>Replace "custom" with the subdomain you want</p>
    <pre>$ <code class="language-sh">jprq http 3000 -s custom</code></pre>

    <h3>Serve static files with built-in HTTP Server</h3>
    <p>Replace "." with any directory to serve</p>
    <pre>$ <code class="language-sh">jprq serve .</code></pre>

    <h3>Debug http tunnels with jprq debugger</h3>
    <p>Debug dashboard URL will show up in output</p>
    <pre>$ <code class="language-sh">jprq http 3000 --debug</code></pre>

    <h3>Serve on a different domain using CNAME</h3>
    <p>Replace example.com with your own domain
        <br>Domain should have CNAME record pointing to your jprq.app to work</p>
    <pre>$ <code class="language-sh">jprq http 3000 --cname example.com</code></pre>
</main>

<script>
    const copyButtonLabel = "Copy";
    let blocks = document.querySelectorAll("pre");

    blocks.forEach((block) => {
        if (navigator.clipboard) {
            let button = document.createElement("button");
            button.innerText = copyButtonLabel;
            block.appendChild(button);
            button.addEventListener("click", async () => {
                await copyCode(block, button);
            });
        }
    });

    async function copyCode(block, button) {
        let code = block.querySelector("code");
        let text = code.innerText;
        await navigator.clipboard.writeText(text);
        button.innerText = "Copied";
        setTimeout(() => {
            button.innerText = copyButtonLabel;
        }, 700);
    }
</script>
</body>
</html>